<template>
	<div class="page">
		<global-header title="现场监控" @back="$router.back()">

			<template #right>
				<div class="absolute flex gap-[6.5px] items-center pr-[15px]" @click="gamesActionSelect?.handleShow()">
					<span class="text-[14px] text-[#333333]">{{ currentData?.Name }}</span>
					<van-icon name="arrow-down" color="#111111" size="8px"></van-icon>
				</div>
			</template>
		</global-header>
		<div class="row-between-center bg-white py-[3px] h-[41.5px]">
			<ActionSelect ref="gamesActionSelect" v-model:val="activeGameIndex" title="全部游戏" :columns="gamesActions" />
			<div class="text-[#E4E4E4]">|</div>
			<div class="flex-1 h-[26px] rounded-[10px] text-[14px] text-[#111111] flex items-center justify-center">
				{{ formatDate(state.data.Time) }}
			</div>
			<!-- <div class="text-[#E4E4E4]">|</div>
			<ActionSelect v-model:val="flowingWaterVal" :columns="flowingWaterActions" title="全部流水" />
			<ActionSelect v-model:val="typeVal" :columns="typeActions" title="全部类型" /> -->
		</div>
		<!-- <div class="px-[15px] py-[10px] bg-white">
			<div
				class="w-full h-[26px] rounded-[10px] bg-[#F6F9FE] text-[#111111] text-[14px] flex items-center justify-center">
				开奖时间：{{ formatDate(state.data.Time) }}
			</div>
		</div> -->
		<div class="h-[10px]"></div>
		<div class="bg-[#FFFFFF] px-[15px] py-[10px] flex justify-between border-b-[1px] border-b-[#E4E4E4] border-solid ">
			<button @click="getData(true)"
				class=" bg-[#F6F9FE] text-[#3976CC] border-[0px] px-[15px] py-[7px] text-[15px] flex gap-[2.5px] items-center">
				<van-icon name="replay" color="#3976CC" size="15px"></van-icon>
				刷新
			</button>
			<div class=" flex gap-[11.5px] items-center flex-1 justify-end">
				<span class=" text-[#333333] text-[14px]">{{ count == 0 ? "手动" : count + "秒" }}</span>
				<div class="c-action-select w-[83.5px] h-[30px] flex items-center justify-center bg-[#F6F9FE]">
					<ActionSelect v-model:val="monitorTimer" title="刷新周期" :columns="refreshActions" />
				</div>
			</div>

		</div>
		<main class="page-main bg-[#FFFFFF]">
			<div class="grow-[1]">
				<ScList v-loading="state.loading" :list="state.list" v-if="currentData?.CategoryId == GameCategory.sc" />
				<SscList v-loading="state.loading" :list="state.list" v-if="currentData?.CategoryId == GameCategory.ssc" />
				<PcddList v-loading="state.loading" :list="state.list" v-if="currentData?.CategoryId == GameCategory.pcdd" />
				<LhcList v-loading="state.loading" :list="state.list" v-if="currentData?.CategoryId == GameCategory.lhc" />
			</div>
		</main>
	</div>
</template>
<route>
  {
    name: "admin-monitor",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import { useGameStore } from "@/store/modules/game";
import { cloneDeep } from "lodash-es";
import { storeToRefs } from "pinia";
import { computed, ref, watch } from 'vue';
import { reqReportRealTime } from "@/api/monitor";
import { useTimerStore } from "@/store/modules/timer";
import { formatDate } from "@/utils/common";

import { GameCategory } from "@/enums";
import ScList from "./components/sc-list.vue";
import SscList from "./components/ssc-list.vue";
import PcddList from "./components/pcdd-list.vue";
import LhcList from "./components/lhc-list.vue";
import { toast } from "@/utils/toast";

const state = reactive({
	loading: false,
	data: {
		Table: {},
		Amount: 0,
		CategoryId: 0,
		Issue: "",
		Person: 0,
		Time: ""
	},
	list: []
});



let timer: any;
const timerStore = useTimerStore();
const { timerList, monitorTimer } = storeToRefs(timerStore);
const count = ref(monitorTimer.value);


const gamesActionSelect = ref(null)

const activeGameIndex = ref(0)
const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);
const games = computed(() => {
	let list = cloneDeep(gameTotal.value);
	list.sort((a, b) => a.LotterySort - b.LotterySort);
	return list;
});
const gamesActions = computed(() => {
	return games.value.map((v, i) => ({ text: v.Name, value: i }))
});


const flowingWaterVal = ref(0);
const flowingWaterActions = ref([
	{ text: "全部流水", value: 0 },
]);

const typeVal = ref(0);
const typeActions = ref([
	{ text: "全部类型", value: 0 },
]);

// const refreshVal = ref(timerList.value[0].value);
const refreshActions = computed(() => {
	return timerList.value.map(a => ({ text: a.name, value: a.value }))
})

const currentData = computed(() => {
	return games.value[activeGameIndex.value]
});


// 获取消息
const getData = async (Refresh = false) => {
	if (!currentData.value) return;
	try {
		state.loading = true;
		const res = await reqReportRealTime(currentData.value.LotteryId);
		if (Refresh) {
			toast.success('刷新成功')
		}
		state.loading = false;
		state.data = res.data;
		const list = [];
		for (let key in res.data.Table) {
			list.push({
				name: key,
				arr: res.data.Table[key]
			});
		}
		state.list = list;
	} catch (error) {
		state.loading = false;
		console.log(error);
	}
};


const setTimer = () => {
	clearInterval(timer);
	timer = null;
	if (monitorTimer.value > 0) {
		timer = setInterval(() => {
			count.value--;
			if (count.value == 0) {
				count.value = monitorTimer.value;
				getData(true);
			}
		}, 1000);
	} else {
		clearInterval(timer);
		timer = null;
		count.value = 0;
	}
};

watch(
	() => activeGameIndex.value,
	() => {
		count.value = monitorTimer.value;
		nextTick(() => {
			getData();
			setTimer();
		});
	}
);

watch(
	() => monitorTimer.value,
	val => {
		count.value = val;
		nextTick(setTimer);
	}
);
onMounted(() => {
	getData();

	setTimer();
});
onUnmounted(() => {
	clearInterval(timer);
	timer = null;
});

</script>
<style scoped lang="scss">
.c-action-select {
	&>:deep(div) {
		width: 100% !important;
	}
}
</style>
